 <template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearFix flex-container">
        <h2>{{isNewPage ? '创建场景' : '修改场景'}}</h2>
        <el-button  class="add-style" type="primary" @click="uploadScreen">完成</el-button>
      </div>

      <div>
        <el-form ref="formData" :model="formData" label-width="140px">
          <el-collapse v-model="collapseActiveName">
            <el-collapse-item title="基本信息编辑" name="setting">
              <!-- 基本信息编辑 -->
              <Setting :formData="formData" :languageList="languageList"/>
            </el-collapse-item>

            <el-collapse-item title="编辑卡片" name="createCard">
              <!-- 创建卡片 -->
              <CreateCard :cardData.sync="cardData" :languages.sync="formData.languages"></CreateCard>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Setting from "./components/setting.vue";
import CreateCard from "./components/CreateCard.vue";
import CardList from "./components/cardList.vue";
import {
  getOneTemplate,
  updateOneTemplate,
  createOneTemplate
} from "api/getData";
import { getAllLanguage } from "src/service/getData";

export default {
  data() {
    return {
      collapseActiveName: "createCard", //手风琴默认选择页面
      formData: {
        name: "", //场景名称
        logo: "", // 封面地址
        languages: []
      },
      cardData: [],
      languageList: [], //可选的语言列表
      isNewPage: true, //是否是新创建页面
      cards: [], //修改时出现的所有文件列表
      currentCode: "",
      selectedLanguageIndex: 0,
      updateId: ""
    };
  },
  components: { Setting, CreateCard, CardList },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.updateId = this.$route.params.id;
      if (this.updateId) {
        //有id表示是修改页面
        this.isNewPage = false;
        // 获取模板数据给模板内的参数赋值
        getOneTemplate(this.updateId).then(res => {
          this.getLanguage(res.languages);

          this.formData = {
            name: res.name,
            logo: res.logo,
            languages: res.languages
          };
          this.cardData = res.cards.map(item => {
            item.isEdit = false; //编辑文本标识
            item.isDelete = false; //删除标识
            item.isPlay = false; //播放音频标识
            return item;
          });
        });
      } else {
        this.getLanguage();
      }
    },
    getLanguage(languages) {
      getAllLanguage().then(res => {
        if (languages) {
          // 如果修改模板有选择的语言数据
          languages = res.map(langResItem => {
            for (var item = 0; item < languages.length; item++) {
              if (languages[item].code == langResItem.code) {
                langResItem.checked = true;
                break;
              // } else if (
              //   (langResItem.code === "zh" || langResItem.code === "en") &&
              //   languages.length == 0
              // ) {
              //   langResItem.checked = true;
              } else {
                langResItem.checked = false;
              }
            }
            return langResItem;
          });
          this.languageList = languages;
          this.currentCode = languages[this.selectedLanguageIndex].code;
        } else {
          res = res.map(item => {
            // if (item.code === "zh" || item.code === "en") {
            //   item.checked = true;
            // } else {
              item.checked = false;
            // }
            return item;
          });
          this.languageList = res;
        }
      });
    },
    uploadScreen: function() {
      var cards = this.cardData.map(item => {
        // delete item.imgName; // 图片名称删除后，修改会比较麻烦
        delete item.isEdit; //编辑文本标识
        delete item.isDelete; //删除标识
        delete item.isPlay; //播放音频标识
        return item;
      });
      var data = this.formData;
      data.languages = data.languages.map(item => {
        cards.map(card => {
          card.audios[item.code] = card.audios[item.code] || "";
          card.names[item.code] = card.names[item.code] || "";
        });
        item = item.code;
        return item;
      });
      data.languages = JSON.stringify(data.languages);
      data.cards = JSON.stringify(cards);

      if (this.updateId) {
        updateOneTemplate(this.updateId, data).then(res => {
          this.$message.success("修改成功");
          this.$router.go(-1);
        });
      } else {
        data.status = 0; // "status": [0: 官方模板] [1: 人工翻译] [2: 人工翻译已发布]
        createOneTemplate(data).then(res => {
          this.$message.success("添加成功");
          this.$router.go(-1);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.flex-container {
  @include fj(space-between);
  align-items: center;
}

.chooseLanguage {
  margin: 10px;
  width: 500px;
}
</style>
